<template>
  <a-modal @cancel="closeModal" @ok="onFormOk" :visible="true" :title="modalTitle" width="50%">
    <a-form :model="formData" class="filer-wrap" :label-col="{ span: 4 }" :wrapperCol="{span:15}">
      <a-form-item label="函数名">
        <a-input v-model:value="formData.name" placeholder="函数名称" :disabled="disabledInput"/>
      </a-form-item>
      <a-form-item label="函数说明">
        <a-input v-model:value="formData.remark" placeholder="函数介绍" :disabled="disabledInput"/>
      </a-form-item>
      <a-form-item label="函数代码"  v-if="formType!=='delete'">
        <div class="code-wrap">
          <CodeEditor :code="formData.code" :disabled="disabledInput"  placeholder="函数代码" > </CodeEditor>
        </div>
      </a-form-item>

    </a-form>
  </a-modal>
</template>
<script setup>
import CodeEditor from '../codeEditor.vue'
import {onBeforeUnmount,defineProps,defineEmit,useContext, ref, computed,unref} from "vue";
import {message} from "ant-design-vue";
import {storage} from "../../../../utils/storage";
defineEmit(['closeFunModal', 'delete'])
const {emit} = useContext()
const props = defineProps({
  funcData: Object
})
// title of the  modal
const modalTitle = computed(()=>{
  switch (formType) {
    case 'add': return  '新增函数' ;break;
    case 'edit': return  '编辑函数' ;break;
    case 'delete': return  '确定删除函数？' ;break;
  }
})

/**
 *  data for the modal form
 */
// data for the modal form
let formData = props.funcData.record
// type of the function modal
let formType = props.funcData.type
// init data when add
if(!formData){
  formData = ref({name: '',code:'',remark:''})
}
// disalbe input when delete and view
const disabledInput = computed(()=>{
  if(formType === 'delete' || formType === 'view') return true
  return false
})

/**
 * when click the ok button in  function modal
 *
 * call methods according to modal type
 * then close the modal
 */
const onFormOk = ()=>{
  if(!verifyForm()){
    return
  }
  switch (formType){
    case 'add': addFunction(); break;
    case 'edit': editFunction(); break;
    case 'delete': deleteFunction(); break;
  }
  closeModal(true);
}

/**
 *  data for operating functions
 */
// keys in storage
const keyMap = computed(()=>{
  return storage.local.get('keyMap') || []
})
// names in storage
const nameMap = computed(()=>{
  return storage.local.get('nameMap') || []
})
// Code in  storage
const getCode = computed(()=>{
  return storage.session.get('code') || ''
})
/**
 * add functions
 *
 * set current Time as key
 * get current code from storage
 * add current function to keyMap and nameMap in storage
 * add current function storage by key
 */
const addFunction = ()=>{
  formData = unref(formData)
  formData.key = new Date().getTime()
  formData.code = getCode
  storage.local.set('keyMap',[...keyMap.value,formData.key])
  storage.local.set('nameMap',[...nameMap.value,formData.name])
  storage.local.set(formData.key,formData)
}

/**
 * edit function
 *
 * get current code from storage
 * refresh function in storage
 */
const editFunction = ()=>{
  formData.code = getCode
  storage.local.set(formData.key,formData)
}
/**
 * delete function
 *
 * remove current function from nameMap and keyMap in storage
 * remove current function from storage
 */
const deleteFunction = ()=>{
  storage.local.set('nameMap',nameMap.value.remove(formData.name))
  storage.local.set('keyMap',keyMap.value.remove(formData.key))
  storage.local.remove(formData.key)
}

/**
 * verify form after click the ok button in  function modal
 *
 * if name exists, return false
 */
const verifyForm = ()=>{
  if(formType === 'add' && nameMap.value.includes(formData.name)){
    message.info('函数已存在，请改名')
    return false
  }
  return true
}

/**
 * close function modal
 *
 * call farther component to close modal
 */
const closeModal = (update)=>{
  emit('closeFunModal',update || false)
}
</script>

<style scoped lang="less">
.code-wrap{
  //width: 80%;
  //margin-left: 10%;
  //height: 300px;
}
</style>
